<template>
    <div class="item-main">
        <input type="checkbox" :checked="todoObj.done" @change="handlecheck(todoObj.id)">
        <span>{{todoObj.title}}</span>
        <input type="button" value="删除任务" @click="handleDelete(todoObj.id)">
    </div>
</template>

<script>
    export default {
        name: 'Item',
        data() {
            return {

            }
        },
        props:['todoObj','checkTodo','delTodo'],
        methods: {
            handlecheck(id){
                this.checkTodo(id);
            },
            // 删除任务
            handleDelete(id){
                if(confirm('确定要删除此任务吗？')){
                    // console.log(id)
                    this.delTodo(id);
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    .item-main{
        width: 478px;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        margin-top: 3px;
        color: rgb(245, 0, 204);
        border: 1px solid #0c9c30;
        &:hover{
            background: #ddd;
        }
        &:hover input[type=button]{
            display: block;
        }
        input[type=checkbox]{
            appearance: none;
            width: 15px;
            height: 15px;
            position: relative;
            top: 5px;
            border: 1px solid #a803f5bd;
        }
        input[type=checkbox]:checked{
            border-radius: 50%;
            transition: all .1s linear;
            background-color: rgb(0, 204, 255);
        }
        input[type=button]{
            color: rgb(52, 161, 140);
            height: 30px;
            outline: none;
            border: none;
            background-color: transparent;
            border-radius: 3px;
            // background: hotpink;
            border: 1px solid rgb(26, 155, 101);
            float: right;
            // margin: 10px 0px;
             margin: 5px 5px 0 0;
            padding: 0 5px 0 5px;
            transition: all .3s linear;
            display: none;
        }
        input[type=button]:hover{
            color: #fff;
            background-color: rgb(226, 18, 157);
        }
    }
</style>